<template>
    <div id="dashboardPeiChart" :style="{ width: '100%', height: '280px' }"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        return {}
    },
    mounted() {
        this.$nextTick(() => {
            this.drawLine()
        })
    },
    methods: {
        drawLine() {
            let myChart = new echarts.init(document.getElementById('dashboardPeiChart'))
            let option = {
                // title: {
                //     text: '{bg|总人数8123}',
                //     left: '20%',
                //     top: '32%',
                //     textStyle: {
                //         rich: {
                //             bg: {
                //                 fontSize: 14,
                //                 align: 'center',
                //                 fontWeight: 700,
                //                 color: '#ffffff',
                //                 backgroundColor: 'rgba(0,0,0,.6)',
                //                 borderRadius: 100,
                //                 height: 90,
                //                 width: 90,
                //             },
                //         },
                //     },
                // },
                legend: {
                    show: true,
                    orient: 'vertical',
                    type: 'scroll',
                    right: 180,
                    top: 80,
                    itemWidth: 24,
                    itemHeight: 24,
                    textStyle: {
                        color: '#ccc',
                        fontSize: 14,
                        padding: [0, 40, 0, 5],
                    },
                    formatter: function (name) {
                        return name.length > 8 ? name.slice(0, 8) + '...' : name
                    },
                },

                series: [
                    {
                        type: 'pie',
                        radius: ['0%', '80%'],
                        left: '-38%',
                        selectedMode: true,
                        label: {
                            show: true,
                            formatter: '{b}: {d}%'
                        },
                        labelLine: {
                            show: true,
                            smooth: true,
                            lineStyle: {
                                type: "dashed",
                                opacity: 0.8
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                fontWeight: 'bold',
                            },
                        },
                        emptyCircleStyle: {
                            color: "rgba(21, 206, 213, 0.29)",
                            borderColor: "rgba(224, 104, 170, 1)",
                            borderType: "dashed",

                            opacity: .5
                        },
                        showEmptyCircle: true,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                            normal: {
                                borderColor: "#fff",
                                borderWidth: 3,
                                // decal: {
                                //     symbol: 'image://https://s2.loli.net/2022/03/16/lOt3gvGCXHVKuTS.png',
                                //     symbolSize: 3,
                                //     color: 'rgba(0, 0, 0, 0.2)',
                                //     dashArrayX: 20,
                                //     dashArrayY: 20,
                                //
                                //     rotation: 0,
                                // },
                                color: function (params) {
                                    var colorList = [
                                        {
                                            c1: '#F2637B',
                                            c2: '#F2637B80',
                                        },
                                        {
                                            c1: '#3AA1FF',
                                            c2: '#3AA1FF80',
                                        },
                                        {
                                            c1: '#59D4D4',
                                            c2: '#59D4D480',
                                        },
                                        {
                                            c1: '#4ECB73',
                                            c2: '#4ECB7380',
                                        },
                                        {
                                            c1: '#FBD437',
                                            c2: '#FBD43780',
                                        },
                                    ]
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: colorList[params.dataIndex].c1,
                                        },
                                        {
                                            offset: 1,
                                            color: colorList[params.dataIndex].c2,
                                        },
                                    ])
                                },
                            },
                        },
                        data: [
                            {value: 1048, name: '校园门禁'},
                            {value: 735, name: '电子校卡'},
                            {value: 580, name: '校园洗衣机'},
                            {value: 484, name: '校园电话'},
                        ],
                    },
                ],
                animation: true,
                animationDelay: 800,
                animationDuration: 3000, // 动画时长 ms
                animationDuration: function (arg) {
                    // 根据 arg 对不同部分设置不同时长的动画
                    // 也可以设置函数 return 3000
                    return arg * 1500
                },
                animationEasing: 'quinticOut', // 缓动动画
                animationThreshold: 10, // 动画阈值 单种动画超过10 就会关闭动画
            }
            myChart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>
</style>
